import { cn } from '@/lib/utils';
import { Link } from 'react-router-dom';
import { useFeaturedServices } from '@/hooks/useServices';
import { Service } from '@/types';

// 默认服务数据（作为后备）
const defaultServices: Service[] = [
  {
    id: 1,
    name: '环境影响评价',
    description: '提供建设项目环境影响评价、区域环境评价、规划环境影响评价等专业服务',
    icon_url: 'fa-file-alt',
    category: '评价服务',
    price: 50000,
    is_active: true,
    is_featured: true,
    sort_order: 1,
    created_at: new Date().toISOString()
  },
  {
    id: 2,
    name: '污染治理工程',
    description: '提供废水、废气、固废处理处置工程设计、施工及运营管理一体化服务',
    icon_url: 'fa-water',
    category: '治理工程',
    price: 100000,
    is_active: true,
    is_featured: true,
    sort_order: 2,
    created_at: new Date().toISOString()
  },
  {
    id: 3,
    name: '生态环境修复',
    description: '提供土壤修复、水体治理、生态恢复等环境修复工程技术服务',
    icon_url: 'fa-leaf',
    category: '修复工程',
    price: 80000,
    is_active: true,
    is_featured: true,
    sort_order: 3,
    created_at: new Date().toISOString()
  },
  {
    id: 4,
    name: '环境监测检测',
    description: '提供水、气、声、土等环境要素的专业监测与检测服务',
    icon_url: 'fa-flask',
    category: '监测服务',
    price: 20000,
    is_active: true,
    is_featured: true,
    sort_order: 4,
    created_at: new Date().toISOString()
  },
  {
    id: 5,
    name: '环保政策咨询',
    description: '提供环保政策解读、合规性评估、排污许可申请等专业咨询服务',
    icon_url: 'fa-gavel',
    category: '咨询服务',
    price: 15000,
    is_active: true,
    is_featured: true,
    sort_order: 5,
    created_at: new Date().toISOString()
  },
  {
    id: 6,
    name: '清洁生产审核',
    description: '提供企业清洁生产审核、节能评估、碳减排方案设计等绿色发展服务',
    icon_url: 'fa-recycle',
    category: '审核服务',
    price: 30000,
    is_active: true,
    is_featured: true,
    sort_order: 6,
    created_at: new Date().toISOString()
  }
];

// 格式化价格的辅助函数
const formatPrice = (price?: number) => {
  if (!price) return '面议';
  if (price >= 10000) {
    return `${(price / 10000).toFixed(1)}万元起`;
  }
  return `${price.toLocaleString()}元起`;
};

export default function ServicesSection() {
  // 获取推荐服务数据
  const { data: featuredServices, isLoading, error } = useFeaturedServices(6);

  // 使用API数据或默认数据
  const services = featuredServices && featuredServices.length > 0 ? featuredServices : defaultServices;

  return (
    <section className="py-20 bg-gray-50">
      <div className="container mx-auto px-4">
        <div className="text-center mb-16">
          <h2 className="text-3xl md:text-4xl font-bold text-gray-800 mb-4">业务范围</h2>
          <div className="w-20 h-1 bg-blue-600 mx-auto mb-6"></div>
          <p className="text-gray-600 max-w-2xl mx-auto text-lg">
            我们提供全方位的环境工程咨询服务，从环境影响评价到污染治理，从生态修复到环保政策咨询，为客户提供一站式绿色发展解决方案
          </p>
        </div>

        {/* 加载状态 */}
        {isLoading && (
          <div className="flex justify-center items-center py-12">
            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
            <span className="ml-2 text-gray-600">加载服务...</span>
          </div>
        )}

        {/* 错误状态 */}
        {error && !isLoading && (
          <div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center mb-8">
            <p className="text-red-600">加载服务失败，显示默认内容</p>
          </div>
        )}

        {/* 服务列表 */}
        {!isLoading && (
          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
            {services.map((service) => (
              <div
                key={service.id}
                className="bg-white rounded-lg p-8 shadow-md hover:shadow-xl transition-all duration-300 border border-gray-100 hover:-translate-y-1 group"
              >
                <div className="w-14 h-14 bg-blue-100 rounded-full flex items-center justify-center mb-6 text-blue-600 text-2xl group-hover:bg-blue-600 group-hover:text-white transition-colors">
                  {service.icon_url?.startsWith('fa-') ? (
                    <i className={`fa-solid ${service.icon_url}`}></i>
                  ) : service.icon_url ? (
                    <img src={service.icon_url} alt={service.name} className="w-8 h-8" />
                  ) : (
                    <i className="fa-solid fa-cog"></i>
                  )}
                </div>

                <div className="flex justify-between items-start mb-3">
                  <h3 className="text-xl font-semibold text-gray-800 group-hover:text-blue-600 transition-colors">
                    {service.name}
                  </h3>
                  {service.category && (
                    <span className="text-xs text-blue-600 bg-blue-50 px-2 py-1 rounded-full">
                      {service.category}
                    </span>
                  )}
                </div>

                <p className="text-gray-600 mb-4 line-clamp-3">
                  {service.description || '暂无描述...'}
                </p>

                {service.price && (
                  <div className="mb-4">
                    <span className="text-lg font-semibold text-green-600">
                      {formatPrice(service.price)}
                    </span>
                  </div>
                )}

                <div className="flex justify-between items-center">
                  <Link
                    to={`/services/${service.id}`}
                    className="inline-flex items-center text-blue-600 font-medium hover:text-blue-800 transition-colors"
                  >
                    了解更多 <i className="fa-solid fa-arrow-right ml-2"></i>
                  </Link>

                  {service.is_featured && (
                    <span className="text-xs text-orange-600 bg-orange-50 px-2 py-1 rounded-full">
                      推荐
                    </span>
                  )}
                </div>
              </div>
            ))}
          </div>
        )}

        {/* 查看更多服务按钮 */}
        <div className="text-center mt-12">
          <Link
            to="/services"
            className="inline-flex items-center bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-8 rounded-lg transition-colors transform hover:scale-105"
          >
            查看全部服务 <i className="fa-solid fa-arrow-right ml-2"></i>
          </Link>
        </div>
      </div>
    </section>
  );
}